<template>
  <div class="wrapper">
    
    <template v-for="item in tagArr" :key="item.path">
      <el-tag
        class="tag-item"
        :class="$route.path==item.path?'active':''"
        color="#fff"
        @close="closeBtn(item.path)"
        :closable="!item.hidden"
        type=""
      >
        <router-link :to="item.path">{{ item.name }}</router-link>
      </el-tag>
    </template>
    
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  watch: {},
  computed: {
    ...mapState(["tagArr"]),
  },
  methods: {
    ...mapMutations(["setTag"]),
    closeBtn(path) {
      let tabs=this.tagArr;
      let idx = tabs.findIndex((item) => item.path == path);
      // console.log("idx", idx);
      let nextTab = tabs[idx + 1] || tabs[idx - 1];
      // console.log("nextTab",nextTab);
       
      this.tagArr.splice(idx, 1);
      this.setTag(this.tagArr);
      this.$router.push(nextTab.path);
    },
  },
  created() {},
  mounted() {
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  .tag-item{
    text-align: center;
    height: 30px;
    padding: 0 20px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
    border-right:1px solid #f7f5f5;
    border-radius: 0!important;
  background-color: transparent!important;
  }
  .active{
    background: url("../assets/tab_bg.png") no-repeat;
    background-size: 100% 103%;
    border-right: none;
  }
  display: flex;
  align-items: center;
  .bar {
    margin: 0 4px;
    cursor: pointer;
  }
  a {
    color: black;
    text-decoration: none;
    padding: 5px;
  }
  .router-link-active {
    color: cornflowerblue;
    font-weight: bold;
  }
  

}
</style>